import styles from "./login.module.scss";
import { useState } from "react";

import { useNavigate } from "react-router-dom";
import saly from "@/assets/saly.png";
import { loginApi, registerApi } from "@/api/login/index";


// interface Login {
//   username: string;
//   password: number;
// }

//   const handleClick = () => {
//     // console.log('11');
//     navigateTo('/');
//   };

const Login = () => {
  const [isShow, setIsShow] = useState(false); // 控制登录 注册
  // const [isHide, setIsHide] = useState(true);    // 控制登录 注册显示隐藏

  const [username, setUsername] = useState("");
  const [uname, setUname] = useState("");
  const [password, setPassword] = useState("");

  const loginData = {
    username: username,
    password: password,
  };

  const registerData = {
    username: username,
    password: password,
    uname: uname,
  };

  const navigateTo = useNavigate();
  // 登录 注册
  const login = async () => {
    if (username == "" || password == "") {
      alert("账号或密码不能为空");
    } else {
      let res: any = await loginApi(loginData);
      if (res.code == 200) {
        alert(res.msg);
        navigateTo("/");
        // 用户信息存本地
        localStorage.setItem("userData", JSON.stringify(res.data));
      }
    }
  };

  const register = async () => {
    if (username == "" || password == "" || uname == "") {
      alert("账号，密码，昵称不能为空");
    } else {
      let res: any = await registerApi(registerData);
      console.log(res);
      alert(res.msg);
      setIsShow(false);
    }
  };

  // 登录 注册显示隐藏切换
  const loginSwitch = () => {
    setIsShow(false);
  };

  const registerSwitch = () => {
    setIsShow(true);
  };

  return (
    <div className={styles.container}>
      <div className={styles.left}>
        <div className={styles.img}>
          <img src={saly} alt="" />
        </div>
      </div>
      <div className={styles.right}>
        <div
          style={isShow ? { display: "none" } : null}
          className={styles.login}
        >
          <h1 style={{ color: "#262626" }}>账号登录</h1>
          <input
            type="text"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            placeholder="账号"
            style={{ margin: "50px 0 10px 0" }}
          />
          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            placeholder="密码"
            style={{ margin: "0 0 50px 0" }}
          />
          <div className={styles.footer}>
            <button onClick={login}>登录</button>
            <button onClick={registerSwitch}>注册</button>
          </div>
        </div>
        <div
          style={!isShow ? { display: "none" } : null}
          className={styles.register}
        >
          <h1 style={{ color: "#262626" }}>账号注册</h1>
          <input
            type="text"
            placeholder="账号"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            style={{ margin: "30px 0 10px 0" }}
          />
          <input
            type="password"
            placeholder="密码"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            style={{ margin: "0 0 10px 0" }}
          />
          <input
            type="text"
            placeholder="昵称"
            value={uname}
            onChange={(e) => setUname(e.target.value)}
            maxLength={5}
            style={{ margin: "0 0 30px 0" }}
          />
          <div className={styles.footer}>
            <button onClick={register}>注册</button>
            <button onClick={loginSwitch}>登录</button>
          </div>
        </div>
      </div>
    </div>
  );
};
export default Login;
